<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>素材</title>
    <link rel="stylesheet" href="../static/plugin/layui/css/layui.css?v=1" media="all">
    <script src="../static/plugin/layui/layui.js?v=1"></script>
    <script src="../static/js/jquery-3.3.1.min.js?v=1"></script> 
    <script src="../static/js/man.js?v=2"></script> 
    <script type="text/javascript">
        $(function () {
            $(window).scroll(function () {
                var nowTop = $(document).scrollTop();
                if (nowTop > 50) {
                    $('.menu').css({
                        position: 'fixed',
                        top: 0,
                        //left: '50%',
                        //marginLeft: -480
                    });
                    $('.totop').show()
                } else {
                    $('.menu').css({
                        position: 'static',
                        left: 0,
                        margin: '0 auto'
                    });
                    $('.totop').hide()
                }
            });
            $('.totop').click(function(){
                $('html,body').animate({
                    scrollTop: 0
                })
            });

        })

    </script>
    <style type="text/css">
        body {
            margin-left: 0;
        }

        .logo_bar {
            width: 100%;
            height: 50px;
            background-color: #f0f0f0;
            margin: 0 auto;
        }

        .menu, .menu_pos {
            width: 100%;
            height: 60px;
            margin: 0 auto;
            background-color: #f0f0f0;
            text-align: center;
            line-height: 60px;
        }

        .menu_pos {
            display: none;
        }

        .down_con {
            width: 96%;
            margin-left: 2%;
            height: 1800px;
            margin: 0 auto;
        }


        .totop {
            width: 50px;
            height: 50px;
            background: url(./up.jpg) center center no-repeat #000;
            border-radius: 50%;
            position: fixed;
            right: 50px;
            bottom: 50px;
            display: none;
        }
    </style>

</head>
<body>
<div class="logo_bar" style="text-align: center;padding-top: 25px;">
    <<<if .My>>>
        <a href="/sucai" style="font-size: 24px;margin-right: 20px;border-bottom: 6px solid red;border-radius: 6px;padding-bottom: 3px;">我的图片</a>
    <<<else>>>
        <a href="/sucai" style="font-size: 24px;margin-right: 20px;">我的图片</a>
    <<<end>>>
    
    <<<if .Mange>>>
        <a href="/mangeimg" style="font-size: 24px;margin-right: 20px;border-bottom: 6px solid red;border-radius: 6px;padding-bottom: 3px;">漫鸽图片库</a>
    <<<else>>>
        <a href="/mangeimg" style="font-size: 24px;margin-right: 20px;">漫鸽图片库</a>
    <<<end>>>
    
</div>
<div class="menu">

    <div class="layui-input-inline" style="width: 60%;">
                    <input id="word" type="text" name="keyword" class="layui-input" placeholder="搜索" />
                    <a href="#" >
                    <i class="layui-icon layui-icon-search" style="position: absolute;top:-10px;right: 13px;"></i></a>
                </div>

</div>
<div class="menu_pos"></div>
<div class="down_con" id="imglist">


    <<<if .My>>>
        <<<range .Data>>>
            <div style="height: 180px;margin:15px;float: left;border-radius:18px;">
                
                    <img class="pimg" id="<<<.ImgId>>>" src="<<<.ImgUrl>>>" title="<<<.ImgName>>>" tag="<<<.ImgTag>>>" date="<<<.ImgCreate>>>" style="height:180px;border-radius:18px;">
            </div>
        <<<end>>>
    <<<end>>>

    <<<if .Mange>>>
        <<<range .Data>>>
            <div style="height: 180px;margin:15px;float: left;border-radius:18px;">
                
                    <img class="mgimg" id="<<<.ImgId>>>" src="<<<.ImgUrl>>>" title="<<<.ImgName>>>" tag="<<<.ImgTag>>>" date="<<<.ImgCreate>>>" style="height:180px;border-radius:18px;">
            </div>
        <<<end>>>
    <<<end>>>

</div>

<div id="outerdiv" style="position:fixed;top:0;left:0;background:rgba(0,0,0,0.7);z-index:2;width:100%;height:100%;display:none;">
    <div id="innerdiv" style="position:absolute; ">
        <img id="bigimg" style="border:5px solid #fff;" src="" />
    </div>
</div>    


<a href="javascript:" class="totop"></a>


<script type="text/javascript">

function mangeimg(){
    $("#imglist").empty();
    $.ajax({
            url:  document.location.protocol+ "//" + window.location.host + "/mangeimg",
            type:'get',
            async:true,//异步请求
            cache:false,
            success:function(rdata) {
                console.log(rdata);
                

                if(JSON.stringify(rdata.data) === '[]'){
                    $("#imglist").append("还未添加图片")
                }

                for(data in rdata.data){
                    console.log(rdata.data[data]);
                    var datainfo = rdata.data[data];
                    var imgdiv = '<div style="height: 180px;margin:15px;float: left;border-radius:18px;">\
                        <img class="pimg" id="'+datainfo.img_id+'" src="'+datainfo.img_url+'" title="'+datainfo.img_name+'" style="height:180px;border-radius:18px;">\
                    </div>'
                    $("#imglist").append(imgdiv)
                }

            },
            //执行失败或错误的回调函数
            error:function(xhr) {
                alert("后台请求出错！");
                console.log(xhr);
            }
          });

}



 $(function(){  
        $(".pimg").click(function(){  
            var _this = $(this);//将当前的pimg元素作为_this传入函数  
            console.log(_this);
            console.log(_this.attr("id"));
            console.log(_this.attr("title"));
            console.log(_this.attr("tag"));
            console.log(_this.attr("date"));
            imgShow("#outerdiv", "#innerdiv", "#bigimg", _this);  
        });  
        $(".mgimg").click(function(){
            var _this = $(this);//将当前的pimg元素作为_this传入函数  
            mgimgShow("#outerdiv", "#innerdiv", "#bigimg", _this);
        })
    });  


    
    function imgShow(outerdiv, innerdiv, bigimg, _this){

        var src = _this.attr("src");//获取当前点击的pimg元素中的src属性 
        var id = _this.attr("id");
        var imgtitle = _this.attr("title");
        var tag = _this.attr("tag");
        var date = _this.attr("date");
        var addDiv='\
        <div style="margin:10px;">\
        <span class="layui-badge layui-bg-orange" style="font-size:8px;">'+date+'</span>\
        <span class="layui-badge layui-bg-blue" style="font-size:8px;">'+tag+'</span><br><br>\
        <img src="'+src+'" style="margin-bottom:10px;width:80%;height80%;margin-left:10%;"><br>\
        <a class="layui-btn layui-btn-radius layui-btn-danger" style="margin-left:10%;" href="'+src+'">复制图片地址</a>\
        <a class="layui-btn layui-btn-radius layui-btn-danger" style="margin-left:5px;" href="/tomangeimg?imgid='+id+'">分享到漫鸽图片库</a>\
        <a class="layui-btn layui-btn-radius layui-btn-danger" href="#">删除图片</a>\
        </div>';

        layui.use("layer",function(){
            layer.ready(function(){
                var layer = layui.layer; 
                restoreLayer = layer.open({
                  type: 1,
                  title: imgtitle, 
                  maxmin: true,
                  area: ['550px'],
                  content: addDiv
                });

            });
        });


        /*
        var src = _this.attr("src");//获取当前点击的pimg元素中的src属性  
        console.log(src)
        
        $("#bigimg").attr("src", src);//设置#bigimg元素的src属性  

            $(innerdiv).css({"top":50, "left":50});//设置#innerdiv的top和left属性  
            $(outerdiv).fadeIn("fast");//淡入显示#outerdiv及.pimg  

        
          
        $(outerdiv).click(function(){//再次点击淡出消失弹出层  
            $(this).fadeOut("fast");  
        });  
        */
    }  


    function mgimgShow(outerdiv, innerdiv, bigimg, _this){

        var src = _this.attr("src");//获取当前点击的pimg元素中的src属性 
        var id = _this.attr("id");
        var imgtitle = _this.attr("title");
        var tag = _this.attr("tag");
        var date = _this.attr("date");
        var addDiv='\
        <div style="margin:10px;">\
        <span class="layui-badge layui-bg-orange" style="font-size:8px;">'+date+'</span>\
        <span class="layui-badge layui-bg-blue" style="font-size:8px;">'+tag+'</span><br><br>\
        <img src="'+src+'" style="margin-bottom:10px;width:80%;height80%;margin-left:10%;"><br>\
        <a class="layui-btn layui-btn-radius layui-btn-danger" style="margin-left:10%;" href="'+src+'">复制图片地址</a>\
        <a class="layui-btn layui-btn-radius layui-btn-danger" style="margin-left:5px;" href="/tomangeimg?imgid='+id+'">点赞</a>\
        <a class="layui-btn layui-btn-radius layui-btn-danger" href="#">收藏</a>\
        </div>';

        layui.use("layer",function(){
            layer.ready(function(){
                var layer = layui.layer; 
                restoreLayer = layer.open({
                  type: 1,
                  title: imgtitle, 
                  maxmin: true,
                  area: ['550px'],
                  content: addDiv
                });

            });
        });
    }


</script>


</body>
</html>